/*
 * @Author: shiguo
 * @Date: 2022-04-29 10:22:16
 * @LastEditors: shiguo
 * @LastEditTime: 2022-04-29 10:27:44
 * @FilePath: /@aks/easyui/lib/StickHeaderView/StickHeaderView.tsx
 */
import * as React from 'react';
import { StyleSheet, Animated, LayoutChangeEvent } from "react-native";

import { StickHeaderViewProps } from '.'



const App: React.FC<StickHeaderViewProps> = (props) => {

    const {
        style,
        children,
        stickyHeaderY = -1,
        stickyScrollY = new Animated.Value(0)
    } = props


    const [stickyLayoutY, setStickyLayoutY] = React.useState(0)

    // 兼容代码，防止没有传头部高度
    const _onLayout = (event: LayoutChangeEvent) => {
        setStickyLayoutY(event.nativeEvent.layout.y)
    };

    const translateY = () => {
        let y = stickyHeaderY !== -1 ? stickyHeaderY : stickyLayoutY;
        return stickyScrollY.interpolate({
            inputRange: [-1, 0, y, y + 1],
            outputRange: [0, 0, 0, 1],
        })
    };


    return (
        <Animated.View
            onLayout={_onLayout}
            style={
                [
                    style,
                    styles.container,
                    { transform: [{ translateY: translateY() }] }
                ]}
        >

            {children}

        </Animated.View>
    )
}

const styles = StyleSheet.create({
    container: {
        zIndex: 100
    },
});


export default React.memo(App)